<template>
  <div class="windbox">
    <img :src="imageUrl" alt="" class="wimg" v-if="imageUrl" />

    <div style="margin-top: 1.34vh; height: 20vh">
      <LISTTABLE
        :topData="topdata"
        :list="listdata"
        @loadingMore="loadingMore"
        @choseItem="choseItem"
        style="height: 18vh"
      />
    </div>
  </div>
</template>
<script>
import LISTTABLE from "components/listable/index";
import { mapState, mapMutations, mapActions } from "vuex";
import { alarmrecord } from "api/zyy";
export default {
  props: {
    source: {
      type: Number,
    },
  },
  data() {
    return {
      topdata: [
        {
          name: "告警时间",
          deindex: "alarm_time",
          callBack: function (item) {
            return item.alarm_time.substring(5);
          },
        },
        {
          name: "告警位置",
          deindex: "address",
        },
        // {
        //   name: "设置IP",
        //    deindex:'alarm_time'
        // },
        {
          name: "告警类型",
          deindex: "alarm_name",
        },
        {
          name: "状态",
          deindex: "status",
          callBack: function (n) {
            if (n == 0) {
              return "待处理";
            } else if (n == 1) {
              return "已忽略";
            } else {
              return "已处理";
            }
          },
        },
      ],
      page: 1,
      listdata: [],
      imageUrl: require("assets/images/zyy/d1.jpg"),
    };
  },
  // 计算属性，会监听依赖属性值随之变化

  mounted() {
    if (this.source == 3) {
      this.topdata.unshift({
        name: "车牌号",
        deindex: "device_name",
      });
      this.topdata.splice(2, 0, {
        name: "当前车速",
        deindex: "notes",
      });
      this.imageUrl = require("assets/images/zyy/default1.jpg");
    }
    this.getAlarmrecord();
  },
  watch: {
    source(n, o) {
      this.page = 1;
      this.listdata = [];
    },
  },
  methods: {
    loadingMore() {
      this.page += 1;
      this.getAlarmrecord();
    },
    choseItem(item) {
      var img = "";
      if (this.source == 3) {
        img = require("assets/images/zyy/default1.jpg");
      } else {
        img = require("assets/images/zyy/d1.jpg");
      }
      item.imageUrl ? (this.imageUrl = item.imageUrl) : (this.imageUrl = img);
    },
    async getAlarmrecord() {
      let res = await alarmrecord({
        pageSize: 10,
        page: this.page,
        source: this.source,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && list[0].imageUrl && (this.imageUrl = list[0].imageUrl);
        list.length && (this.listdata = this.listdata.concat(list));
      }
    },
  },
  components: {
    LISTTABLE,
  },
};
</script>
<style lang="scss" scoped>
.wimg {
  display: block;
  border: none;
  outline: none;
  margin: 0 auto;
  position: relative;
  width: 20vw;
  height: 18vh;
  top: -18px;
}
</style>
